<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
<head>
    <meta charset="utf-8">
    <script src="lib/esl.js"></script>
    <script src="lib/config.js"></script>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/facePrint.js"></script>
    <script src="data/pie-texture.js"></script>
    <script src="data/symbols.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="lib/reset.css">
</head>
<body>
<style>
    body {
    }

    .chart {
        position: relative;
        height: 500px;
        max-width: 1000px;
        margin: 0 auto;
    }

    h2 {
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        font-weight: normal;
        background: #dde;
        margin: 0;
    }

    strong {
        color: #971f3c;
    }
</style>

<h2>repeatDirection | dynamic</h2>
<div class="chart" id="paper-and-hill"></div>
<h2>texture</h2>
<div class="chart" id="texture"></div>
<h2>horizontal | no clip | symbolOffset</h2>
<div class="chart" id="velocity"></div>
<h2>clip</h2>
<div class="chart" id="clip"></div>
<h2>dotted | gradient</h2>
<div class="chart" id="dotted"></div>

<script>

    function makeChart(id, option, cb) {
        require([
            'echarts'
            // 'echarts/chart/pictorialBar',
            // 'echarts/chart/bar',
            // 'echarts/chart/line',
            // 'echarts/chart/scatter',
            // 'echarts/component/grid',
            // 'echarts/component/legend',
            // 'echarts/component/markLine',
            // 'echarts/component/tooltip',
            // 'echarts/component/dataZoom'
        ], function (echarts) {

            if (typeof option === 'function') {
                option = option(echarts);
            }

            var main = document.getElementById(id);
            if (main) {
                var chartMain = document.createElement('div');
                chartMain.style.cssText = 'height:100%';
                main.appendChild(chartMain);
                var chart = echarts.init(chartMain);
                chart.setOption(option);

                window.addEventListener('resize', chart.resize);

                cb && cb(echarts, chart);
            }

        });
    }

</script>


<script>

    makeChart('paper-and-hill', {
        backgroundColor: '#0f375f',
        tooltip: {},
        legend: {
            data: ['all'],
            textStyle: {color: '#ddd'}
        },
        xAxis: [{
            data: ['圣诞节儿童愿望清单', '', '珠穆朗玛', '乞力马扎罗'],
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
                margin: 20,
                textStyle: {
                    color: '#ddd',
                    fontSize: 14
                }
            }
        }],
        yAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
        },
        markLine: {
            z: -1
        },
        animationEasing: 'elasticOut',
        series: [{
            type: 'pictorialBar',
            name: 'all',
            hoverAnimation: true,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    formatter: '{c} m',
                    textStyle: {
                        fontSize: 16,
                        color: '#e54035'
                    }
                }
            },
            data: [{
                value: 13000,
                symbol: imageSymbols.paper,
                symbolRepeat: true,
                symbolSize: ['130%', '20%'],
                symbolOffset: [0, 10],
                symbolMargin: '-30%',
                animationDelay: function (dataIndex, params) {
                    return params.index * 30;
                }
            }, {
                value: '-',
                symbol: 'none',
            }, {
                value: 8844,
                symbol: 'image://./data/hill-Qomolangma.png',
                symbolSize: ['200%', '105%'],
                symbolPosition: 'end',
                z: 10
            }, {
                value: 5895,
                symbol: 'image://./data/hill-Kilimanjaro.png',
                symbolSize: ['200%', '105%'],
                symbolPosition: 'end'
            }],
            markLine: {
                symbol: ['none', 'none'],
                label: {
                    normal: {show: false}
                },
                lineStyle: {
                    normal: {
                        color: '#e54035',
                        width: 2
                    }
                },
                data: [{
                    yAxis: 8844
                }]
            }
        }, {
            name: 'all',
            type: 'pictorialBar',
            symbol: 'circle',
            itemStyle: {
                normal: {
                    color: '#185491'
                }
            },
            silent: true,
            symbolOffset: [0, '50%'],
            z: -10,
            data: [{
                value: 1,
                symbolSize: ['150%', 50]
            }, {
                value: '-'
            }, {
                value: 1,
                symbolSize: ['200%', 50]
            }, {
                value: 1,
                symbolSize: ['200%', 50]
            }]
        }]
    });
</script>


<script>

    var img = new Image();
    img.src = window.pieTexture;

    makeChart('texture', {
        backgroundColor: '#13978b',
        tooltip: {},
        xAxis: {
            data: ['a', 'b', 'c'],
            axisTick: {show: false}
        },
        yAxis: {
            splitLine: {show: false},
            axisTick: {show: false}
        },
        animationEasing: 'elasticOut',
        series: [{
            name: 'all',
            type: 'pictorialBar',
            barCategoryGap: '40%',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#e54035'
                    }
                }
            },
            hoverAnimation: true,
            data: [{
                value: 8844,
                symbol: 'circle',
                label: {
                    normal: {formatter: 'symbolPatternSize: default'}
                },
                itemStyle: {
                    normal: {
                        color: {
                            image: img,
                            repeat: 'repeat'
                        }
                    }
                }
            }, {
                value: 8844,
                symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                label: {
                    normal: {formatter: 'symbolPatternSize: 800'}
                },
                symbolPatternSize: 800,
                itemStyle: {
                    normal: {
                        color: {
                            image: img,
                            repeat: 'repeat'
                        }
                    }
                }
            }, {
                value: 8844,
                symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                label: {
                    normal: {formatter: 'symbolPatternSize: 50'}
                },
                symbolPatternSize: 50,
                itemStyle: {
                    normal: {
                        color: {
                            image: img,
                            repeat: 'repeat'
                        }
                    }
                }
            }]
        }]
    });
</script>


<script>

    var rawData = [
        {name: '驯鹿', velocity: 123, symbol: 'reindeer'},
        {name: '火箭', velocity: 60, symbol: 'rocket'},
        {name: '飞机', velocity: 25, symbol: 'plane'},
        {name: '高铁', velocity: 18, symbol: 'train'},
        {name: '轮船', velocity: 12, symbol: 'ship'},
        {name: '汽车', velocity: 9, symbol: 'car'},
        {name: '跑步', velocity: 2, symbol: 'run'},
        {name: '步行', velocity: 1, symbol: 'walk'}
    ];

    // 真实数据：
    // {name: '驯鹿', velocity: 4705882, symbol: 'reindeer'},
    // {name: '火箭', velocity: 38880, symbol: 'thunder'},
    // {name: '飞机', velocity: 1028, symbol: 'plane'},
    // {name: '高铁', velocity: 300, symbol: 'train'},
    // {name: '汽车', velocity: 60, symbol: 'car'},
    // {name: '轮船', velocity: 30, symbol: 'ship'},
    // {name: '跑步', velocity: 15, symbol: 'run'},
    // {name: '步行', velocity: 5, symbol: 'walk'}

    makeChart('velocity', {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none'
            }
        },
        xAxis: {
            data: rawData.map(function (item) {
                return item.name;
            }),
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
                textStyle: {
                    color: '#e54035'
                }
            }
        },
        yAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
        },
        color: ['#e54035'],
        series: [{
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '-50%',
            symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
            itemStyle: {
                normal: {
                    opacity: 0.5
                },
                emphasis: {
                    opacity: 1
                }
            },
            data: rawData.map(function (item) {
                return item.velocity;
            }),
            z: 10
        }, {
            name: 'glyph',
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolSize: [25, 25],
            symbolOffset: [0, -35],
            itemStyle: {
                emphasis: {
                    color: 'green'
                }
            },
            data: rawData.map(function (item) {
                return {
                    value: item.velocity,
                    symbol: pathSymbols[item.symbol]
                };
            })
        }]
    });
</script>


<script>

    function getBodyImage(index) {
        return pathSymbols['body' + index];
    }

    var bodyMax = 150;

    makeChart('clip', {
        tooltip: {},
        legend: {
            data: ['typeA', 'typeB'],
            selectedMode: 'single'
        },
        xAxis: {
            data: ['a', 'b', 'c', 'd', 'e'],
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
                textStyle: {
                    color: '#e54035'
                }
            }
        },
        yAxis: {
            max: bodyMax,
            splitLine: {show: false}
        },
        grid: {
            left: 'center',
            top: 100,
            width: 800,
            height: 230
        },
        series: [{
            name: 'typeA',
            type: 'pictorialBar',
            symbolClip: true,
            symbolBoundingData: bodyMax,
            data: [{
                value: 123,
                symbol: getBodyImage(0)
            }, {
                value: 34,
                symbol: getBodyImage(1)
            }, {
                value: 101,
                symbol: getBodyImage(2)
            }, {
                value: 89,
                symbol: getBodyImage(3)
            }, {
                value: 72,
                symbol: getBodyImage(4)
            }],
            z: 10
        }, {
            name: 'typeB',
            type: 'pictorialBar',
            symbolClip: true,
            symbolBoundingData: bodyMax,
            data: [{
                value: 12,
                symbol: getBodyImage(0)
            }, {
                value: 44,
                symbol: getBodyImage(1)
            }, {
                value: 131,
                symbol: getBodyImage(2)
            }, {
                value: 33,
                symbol: getBodyImage(3)
            }, {
                value: 142,
                symbol: getBodyImage(4)
            }],
            z: 10
        }, {
            name: 'full',
            type: 'pictorialBar',
            symbolBoundingData: bodyMax,
            itemStyle: {
                normal: {
                    color: '#ccc'
                }
            },
            data: [{
                value: 1,
                symbol: getBodyImage(0)
            }, {
                value: 1,
                symbol: getBodyImage(1)
            }, {
                value: 1,
                symbol: getBodyImage(2)
            }, {
                value: 1,
                symbol: getBodyImage(3)
            }, {
                value: 1,
                symbol: getBodyImage(4)
            }]
        }]
    });
</script>


<script>
    makeChart('dotted', function (echarts) {
        var bgColor = '#0f375f';
        var category = [];
        var count = 20;
        var dottedBase = +new Date();
        var lineData = [];
        var barData = [];

        for (var i = 0; i < count; i++) {
            var date = new Date(dottedBase + 3600 * 24);
            category.push([
                date.getFullYear(),
                date.getMonth() + 1,
                date.getDate()
            ].join('-'));
            var b = Math.random() * 200;
            var d = Math.random() * 200;
            barData.push(b)
            lineData.push(d + b);
        }

        return {
            backgroundColor: bgColor,
            tooltip: {},
            legend: {
                data: ['line', 'bar'],
                textStyle: {
                    color: '#ccc'
                }
            },
            xAxis: {
                data: category,
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            yAxis: {
                splitLine: {show: false},
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                }
            },
            series: [{
                name: 'line',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 15,
                data: lineData
            }, {
                name: 'bar',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: '#14c8d4'},
                                {offset: 1, color: '#43eec6'}
                            ]
                        }
                    }
                },
                data: barData
            }, {
                name: 'line',
                type: 'bar',
                barWidth: 10,
                barGap: '-100%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(20,200,212,0.5)'},
                                {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                                {offset: 1, color: 'rgba(20,200,212,0)'}
                            ]
                        )
                    }
                },
                z: -12,
                data: lineData
            }, {
                name: 'dotted',
                type: 'pictorialBar',
                symbol: 'rect',
                itemStyle: {
                    normal: {
                        color: bgColor
                    }
                },
                symbolRepeat: true,
                symbolSize: [12, 4],
                symbolMargin: 1,
                z: -10,
                data: lineData
            }]
        };
    });

</script>


</body>
</html>
